<template xmlns:el-input="http://www.w3.org/1999/XSL/Transform">
  <div class="div_background">
    <el-card :body-style="{ padding: '0px' }" shadow="hover" style="border: solid lightblue;background: darkgrey;width: 400px;height: 420px">
     <template slot="header" class="slot_header" >
        <icon class="fa fa-tripadvisor">&nbsp;</icon>Night Owl Field
     </template>
     <el-form ref="loginForm" model="loginForm"  label-position="left" >
        <div class="title-container" style="margin-top: 10px" >
            <div class="login_header" v-show="login==true">
             <el-button @click="cur=true" type="primary" round plain>账号登录</el-button>
             <el-button @click="cur=false" type="primary" round plain>短信登录</el-button>
        </div>
            <div class="login_header" v-show="login==false">
            <el-button type="primary" round style="width: 60%;margin-left: 10%">当前为注册界面</el-button>
        </div>
        </div>
        <div v-show="login==true">
            <div v-show="cur==true" >
        <el-form-group>
        <el-form-item prop="mobile" label="手机号:" label-width="20%" >
              <el-input ref="mobile" v-model="loginForm.mobile" clearable placeholder="请输入手机号"  suffix-icon="el-icon-phone" />
        </el-form-item>
        </el-form-group>

        <el-form-group>
        <el-form-item prop="password" label="密码："label-width="20%">
              <el-input label="password"v-model="loginForm.password" placeholder="请输入密码" show-password ></el-input>
        </el-form-item>
        </el-form-group>
      </div>
            <div v-show="cur==false" >
        <el-form-item prop="mobile" label="账号:"label-width="20%">
              <el-input  ref="mobile"  v-model="loginForm.mobile" clearable placeholder="请输入账号"  suffix-icon="el-icon-user-solid"/>
        </el-form-item>
        <el-form-group>
          <el-form-item prop="password" label="密码："label-width="20%">
            <el-input label="password"  v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form-group>
      </div>
            <el-button class="login_button" type="success"><i class="fa fa-hand-pointer-o"></i>登录</el-button>
            <div style="margin-left: 80%;margin-top: 15px;font-size: 15px">
        <el-button type="primary" @click="login=false">注册</el-button>
      </div >
            <div >
                <hr width="100%" style="margin-top: 10px;">
                <p style="text-indent: 10px">&copy;CopyRight2019~~2021天津中德应用技术大学</p>
                <p style="font-size: 12px;text-indent: 30px" >京ICP备12020869号-2 | 京公网安备44010602000207</p>
            </div>
        </div>
        <div v-show="login==false">
      <el-form-group>
        <el-form-item prop="mobile" label="手机号:" label-width="25%" >
          <el-input ref="mobile" v-model="loginForm.mobile" clearable placeholder="请输入手机号"  suffix-icon="el-icon-phone" />
        </el-form-item>
      </el-form-group>

      <el-form-group>
        <el-form-item prop="password" label="密码："label-width="25%">
          <el-input label="password"v-model="loginForm.password" placeholder="请输入密码" show-password ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="确认密码："label-width="25%">
          <el-input label="password"v-model="surePassword" placeholder="请输入密码" show-password ></el-input>
        </el-form-item>
      </el-form-group>
      <el-button class="login_button" type="success" style="margin-left: 25%;width: 60%;"><i class="fa fa-hand-pointer-o"></i>注册</el-button>
      <div style="margin-left: 70%;margin-top: 10px;font-size: 15px">
        <el-button type="primary" @click="login=true">返回登录</el-button>
      </div>

    </div>
      </el-form>

    </el-card>
  </div>
</template>

<script>

    export default {
        name: "Login5",
      data(){
          return{
            loginForm:{
              mobile:"",
              password:"",
            },
            cur:true,
            login:true,
            sending:false,
            sendDisabled:false,
            surePassword:''
          }
      }
    }
</script>

<style scoped>
  .el-card{
    margin-top: 100px;
    margin-left: 1000px;
    width: 400px;

  }
  .div_background{
    margin: 0 auto;
    background-image: url("../../assets/lol.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    height: 100%;
    width: 100%;
  }
  .el-input{
    width: 80%;
  }
  .login_header{
    margin-bottom: 30px;
    text-align: center;
  }
.login_button{
  width: 65%;
  margin-left: 20%;
  margin-right: 15%;
}

</style>
